<template>
  <div class="goodslist">
    <van-sticky :offset-top="44">
      <div class="search">
        <van-search
          v-model="value"
          shape="round"
          background="#ff6a6c"
          placeholder="请输入搜索关键词"
        />
      </div>
    </van-sticky>
    <van-empty
      v-show="list.length === 0"
      :image="require('../assets/undraw_Hiking_re_k0bc01.png')"
      description="暂时没有噢"
    />
    <div class="grid">
      <div
        class="grid-item"
        v-for="(item, index) in list"
        :key="index"
        @click.stop="toGoodsDetail(item.id)"
      >
        <img :src="item.picUrl" alt />
        <span>{{ item.name | ellipsis }}</span>
        <span>￥{{ item.retailPrice }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { Search, Sticky, Empty } from "vant";
import API from "@/utils/api.js";
export default {
  data() {
    return {
      value: "",
      //商品列表
      list: [],
    };
  },
  components: {
    [Search.name]: Search,
    [Sticky.name]: Sticky,
    [Empty.name]: Empty,
  },
  created() {
    this.getGoodsList();
  },
  methods: {
    getGoodsList() {
      this.$get(API.GET_GOODS_LIST, {
        categoryId: this.$route.query.id,
      }).then((res) => {
        this.list = res.data.list;
        console.log("列表", this.list);
      });
    },
    toGoodsDetail(id) {
      this.$router.push({ path: "/goodsdetail", query: { id: id } });
    },
  },
  filters: {
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 8) {
        return value.slice(0, 8) + "...";
      }
      return value;
    },
  },
};
</script>

<style lang="less" scoped>
.goodslist {
  margin-top: 46px;
  position: relative;
  height: 100%;
  width: 100%;
  overflow-y: hidden;
  color: #444;
  .van-empty__image{
  width: 200px;
  height: 200px;
}
  .grid {
    width: 95%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    .grid-item {
      display: flex;
      flex: 1;
      flex-direction: column;
      align-items: center;
      img {
        width: 120px;
        height: 120px;
      }
      span:nth-child(3) {
        color: rgb(238, 74, 74);
        margin-top: 8px;
      }
    }
  }
}
</style>